<template>
	<div class="settings-sessions -mt-4">
		<NScrollbar x-scrollable>
			<UpTable
				:options="tableOptions"
				:data="list || []"
				idKey="id"
				class="max-md:min-w-full max-md:w-max !min-h-20"
				tableClass="max-md:!w-auto">
				<template #loading>
					<BaseLoadingCircle />
				</template>
				<template #transactionType="{ data: item }">
					<span class="text-t-1">{{ $t(`transactions.${item?.transactionType}`) }}</span>
				</template>
				<template #state="{ data: item }">
					<span :class="item?.state === 'Successful' ? 'text-warning' : ''">
						{{ item?.state ? $t(`transactions.${item?.state}`) : '-' }}
					</span>
				</template>
				<template #txHash="{ data: item }">
					<div
						class="text-text-1 overflow-ellipsis w-full overflow-hidden"
						:class="item?.txHash ? 'text-primary' : ''"
						@click="clickTxHash">
						{{ item?.txHash ? item?.txHash : '-' }}
					</div>
				</template>
				<template #createdTime="{ data: item }">
					<up-date :value="item.createdTime" :dateFormat="'p dd-MM-yyyy'"></up-date>
				</template>
			</UpTable>
		</NScrollbar>
		<BaseMore :isFinish="isFinish" :loading="loading" @load="getData(false)" />
		<Details
			:isVisible="showModal"
			:details="targetDetails"
			:title="detailsType === 'deposit' ? '存款详情' : '提款详情'"
			@update:isVisible="showModal = $event" />
	</div>
</template>

<script lang="ts" setup>
import { getTransactionRecode } from '@/api/other.ts'
import { BaseLoadingCircle, BaseMore } from '@/components/base'
import { useRequest } from '@/hooks'
import { onMounted, watch, ref } from 'vue'
import { TableOptions, UpTable, UpDate } from '@/components/up'
import { useAppStore } from '@/store'
import Details from './Details.vue'
import { useRoute } from 'vue-router'

const props = defineProps({
	category: {
		type: String,
		default: ''
	}
})
const route = useRoute()
const appStore = useAppStore()
const tableOptions = <TableOptions[]>[
	{ prop: 'transactionType', textT: 'transactions.type', slot: 'transactionType' },
	{ prop: 'createdTime', textT: 'transactions.date', slot: 'createdTime' },
	{ prop: 'amount', hoverProp: 'amount', textT: 'transactions.amount', type: 'currency' },
	{ prop: 'state', textT: 'transactions.state', slot: 'state' },
	{ prop: 'txHash', textT: 'transactions.jumpUrl', align: 'right', slot: 'txHash' }
]

const { run, list, loading, isFinish } = useRequest<any>(getTransactionRecode, {
	showError: true,
	pageSize: 10,
	paramsAlias: { page: 'pageNum' },
	resultAlias: { list: 'records' }
})
appStore.setTransactionFilter('0')
const getData = async (refresh?: boolean) => {
	let params = {
		currency: appStore.transactionFilter,
		transactionCategory: props.category
	}
	if (appStore.transactionFilter == '0') {
		// @ts-ignore
		delete params.currency
	}
	await run({ param: params }, { refresh })
}

// 查看存款详情
const showModal = ref(false)
const detailsMap = {
	// 存款
	deposit: [
		{ title: '订单状态', content: '进行中', contentClass: ['!text-[#00BD79]'] },
		{ title: '货币', content: 'CNY-牛牛' },
		{ title: '存款钱包', content: '牛牛钱包' },
		{ title: '存款金额', content: 'CNY-牛牛1,000.00' },
		{ title: '日期', content: '09:32AM31-07-2024' },
		{ title: 'EXID', content: 'D2024072132323' }
	],
	// 提款
	withdraw: [
		{ title: '订单状态', content: '进行中', contentClass: ['!text-[#00BD79]'] },
		{ title: '货币', content: 'CNY-牛牛' },
		{ title: '提款方式', content: '牛牛钱包' },
		{ title: '提款金额', content: 'CNY-牛牛1,000.00' },
		{ title: '商户费用(1%)', content: '10.00' },
		{ title: '实际到账金额', content: '999.00' },
		{ title: '日期', content: '09:32AM31-07-2024' },
		{ title: 'TXID', content: 'D2024072132323' }
	]
}
const targetDetails = ref([])
const detailsType = ref('')
const clickTxHash = () => {
	detailsType.value = route.path.split('/').pop()
	targetDetails.value = detailsMap[detailsType.value]
	showModal.value = true
	// console.log('点击了')
}
const details = watch(
	() => [appStore.transactionFilter],
	() => {
		getData(true)
	}
)
onMounted(() => {
	getData()
})
</script>
